<template>
  <div>
    <van-nav-bar title="疫情数据" 
     @click-left="$router.go(-1)"
      left-arrow
    />
    <!-- 标题 -->
    <div class="title">
      <!-- 头部的切换地点卡片部分 -->
      <div class="changebox">
        <!-- 出发地目的地上半部分 -->
        <div class="cityDisbox">
          <p>出发地</p>
          <p>目的地</p>
        </div>
        <!-- 地点选择下半部分 -->
        <div class="transBoxLeft">
          <!-- 左侧部分 -->
          <van-cell-group inset>
            <van-cell
              is-link
              @click="showFrom"
              :value="valueAreaFrom == '' ? '请选择出发地' : valueAreaFrom"
            />
            <!-- 起始地显示框部分 -->
            <van-popup v-model="Ashow" :style="{ width: '80%', height: '70%' }">
              <van-area
                :columns-num="2"
                :area-list="areaList"
                @confirm="onAreaFrom"
                @cancel="CanelFrom"
              />
            </van-popup>
          </van-cell-group>

          <!-- 右侧部分 -->
          <van-cell-group inset>
            <van-cell
              is-link
              @click="showTo"
              :value="valueAreaTo == '' ? '请选择目的地' : valueAreaTo"
            />
            <!-- 目的地显示框部分 -->
            <van-popup v-model="Bshow" :style="{ width: '80%', height: '70%' }">
              <van-area
                :columns-num="2"
                :area-list="areaList"
                @confirm="onAreaTo"
                @cancel="CanelTo"
              />
            </van-popup>
          </van-cell-group>
        </div>
      </div>
    </div>
    <!-- 卡片部分结束 -->
    <!-- 下方部分开始,重要信息部分 -->
    <div class="information">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <img class="horn" src="/chuxing_gongao.png" alt="" />
            <span class="tips">重要通知</span>
          </template>
          <div class="infbody">
            疫情高中风险地区的人员要取消外出旅行，其他地区的人员出行前注意查询目的地的疫情风险状态，暂缓前去高、中风险地区旅行。各地防疫措施在不断更新，出行前可咨询当地市长热线（区号+12345）或防疫指挥中心（区号+12320），以防耽误出行计划。（来源：健康中国）
          </div>
        </van-collapse-item>
      </van-collapse>
      <!-- 测试 -->
      <!-- <div class="tool"></div> -->
      <!-- 出发地政策部分 -->
      <div class="policy" v-if="showFrominf">
        <!-- 标题 -->
        <span class="from">出发地:{{ fromdata.city }}</span>
        <van-tag type="success" v-if="fromdata.poi_list == ''" class="tag"
          >低风险区域</van-tag
        >
        <van-tag class="tag" v-else type="warning">中风险区域</van-tag>
        <!-- 标题下方的小字 -->
        <div class="resuletime">
          <p>综合当地卫健委和权威网站</p>
          <p>政策发布时间：{{ fromdata.back_policy_date }}</p>
        </div>
        <!-- 离开政策部分 -->
        <span class="from">离开政策</span>
        <div class="resuletime">
          <p>
            {{ fromdata.leave_policy }}
          </p>
        </div>
      </div>
      <!-- 目的地政策部分 -->
      <div class="arrive" v-if="showToinf">
        <!-- 标题 -->
        <span class="from">目的地:{{ todata.city }}</span>
        <van-tag type="success" v-if="todata.poi_list == ''" class="tag"
          >低风险区域</van-tag
        >
        <van-tag class="tag" v-else type="warning">中风险区域</van-tag>
        <!-- 标题下方的小字 -->
        <div class="resuletime">
          <p>综合当地卫健委和权威网站</p>
          <p>政策发布时间：{{ todata.leave_policy_date }}</p>
        </div>
        <!-- 离开政策部分 -->
        <span class="from">到达政策</span>
        <div class="resuletime">
          <p>
            {{ todata.back_policy }}
          </p>
        </div>
        <span class="from">住宿须知</span>
        <div class="resuletime">
          <p>
            {{ todata.stay_info }}
          </p>
        </div>
        <!-- 风险区域 -->
        <div v-if="area">
          <span class="from">中高风险区域</span>
          <div style="margin-bottom: 20px" class="danger" v-for="(item,index) in poi_address" :key="index">
            <van-tag class="tag" type="warning">中风险区域</van-tag>
            <span style="margin: 0 0 0 15px" >
              {{item.area}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  mounted() {
    //  console.log(this.fromdata.poi_list);
  },
  data() {
    return {
      areaList,
      activeNames: ["1"],
      // 起始地数据部分
      Ashow: false,
      valueAreaFrom: "", //起始地的字符串格式(上方区域显示的部分)
      arrAreaFrom: [], //起始地的数组格式
      fromcode: "", //存储起始地code值
      fromdata: [], //存储起始地的数据源
      showFrominf: false, //设置默认下方数据不显示
      // 目的地数据部分------------------------------
      Bshow: false,
      valueAreaTo: "", //目的地字符串格式
      arrAreaTo: [], //目的地数组格式
      tocode: "", //存储目的地code值
      todata: "", //存储目的地的数据源
      showToinf: false, //设置默认下方数据不显示
      area: false, //设置默认中高风险区域不显示
      poi_address: [], //存储病例地址数组
    };
  },
  methods: {
    showFrom() {
      this.Ashow = true;
    },
    CanelFrom() {
      this.Ashow = false;
    },
    // 起始地确认判断部分
    onAreaFrom(val) {

      // 确认之后关闭显示框
      this.Ashow = false;
      // 把选中的值添加到数组中
      this.arrAreaFrom = val;
      // 提取选中的市和区(下标为0的为市,下标为1的是区)
      var addrInfo = val[1].name;
      // 把提取的市和区的名字保存到本地显示到上方区域
      this.valueAreaFrom = addrInfo;

      // 获取出发地的code值
      if (val[1].name == val[0].name) {
        this.fromcode = val[0].code;
      } else {
        this.fromcode = val[1].code;
      }

      // 显示下方部分
      this.showFrominf = true;
      // 发送ajax请求获取数据
      this.axios
        .get(`/journey/api/trackmap/citypolicy?&city_id=${this.fromcode}`)
        .then((res) => {

          this.fromdata = res.data.result.data[0];
 
        });
    },
    // ------------------------------------------------------------------------------------------------------------------------------------
    // 目的地判断部分
    showTo() {
      this.Bshow = true;
    },
    CanelTo() {
      this.Bshow = false;
    },
    onAreaTo(val) {
      // console.log(val);

      // 确认之后关闭显示框
      this.Bshow = false;
      // 把选中的值添加到数组中
      this.arrAreaTo = val;
      // 提取选中的市和区(下标为0的为市,下标为1的是区)
      var addrInfo = val[1].name;
      // 把提取的市和区的名字保存到本地
      this.valueAreaTo = addrInfo;
  
      // 获取目的地当前项的code值
      if (val[1].name == val[0].name) {
        this.tocode = val[0].code;
      } else {
        this.tocode = val[1].code;
      }
  
      // 显示下方数据
      this.showToinf = true;
      this.axios
        .get(`/journey/api/trackmap/citypolicy?&city_id=${this.tocode}`)
        .then((res) => {
          // console.log(res);
          this.todata = res.data.result.data[0];
          this.poi_address=this.todata.poi_list
       
          // 判断病例列表是否为0,如果为0,下方不显示继续false
          if (this.todata.poi_list.length == 0) {
            this.area=false
            return;
          } else {
            this.area = true;
            // console.log(this.area);
          }
        });
             // 清空病例数组
      // this.poi_address=[]
    },
  },
};
</script>

<style lang="less" scoped>
// 到达部分css
.arrive {
  padding: 12px 16px;
  .danger {
    // display: flex;
    font-size: 12px;
    color: #666;
    margin-top: 10px;
  }
  .resuletime {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
  }
  .tag {
    width: 65px;
    height: 13px;
    padding: 3px 3px;
    margin-left: 4px;
  }
  .from {
    font-size: 4.267vw;
    font-weight: 600;
    margin-right: 9px;
  }
}
// 出发地部分css
.policy {
  padding: 12px 16px;
  .resuletime {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
  }
  .tag {
    width: 65px;
    height: 13px;
    padding: 3px 3px;
    margin-left: 4px;
  }
  .from {
    font-size: 4.267vw;
    font-weight: 600;
    margin-right: 9px;
  }
}
.information {
  width: 100%;
  margin: 0 auto;
  margin-top: 10vh;
  height: 17.1vh;
  padding: 0;
  .infbody {
    font-size: 3.467vw;
    line-height: 5.333vw;
    color: #666;
    font-weight: 400;
  }
  .tips {
    padding-left: 1.333vw;
    font-size: 4.267vw;
    color: #222;
    font-weight: 600;
    padding-bottom: 0;
  }
  .horn {
    width: 4.533vw;
    height: 4.533vw;
  }
}
.van-nav-bar {
  background-color: #1074ff;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.title {
  height: 53.8vw;
  margin-top: -2px;
  background: url(/chuxing_bg11.png) no-repeat center;
  background-size: 100%;
  position: relative;
  img {
    width: 50%;
    // margin-top: 30px;
  }
  .changebox {
    position: absolute;
    background-color: white;
    width: 97vw;
    height: 10.9vh;
    left: 1.5vw;
    top: 24vh;
    border-radius: 15px;
    box-shadow: 0 1px 1px hsl(0deg, 0%, 89%);
    padding-bottom: 21px;
    .cityDisbox {
      padding: 5.333vw 8.8vw 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        color: #656565;
        font-size: 3.733vw;
        margin: 0;
      }
    }
    .transBoxLeft {
      display: flex;
      justify-content: space-between;
      .choosebox {
        border-bottom: none;
        width: 150px;
      }
    }
  }
}
</style>